<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>设置</title>

  <!-- Bootstrap core CSS -->
  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <link href="/css/bootstrap-switch.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="/css/custom_theme.css" rel="stylesheet">

</head>

<body role="document">

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">扒虫</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="/">书柜<span class="glyphicon glyphicon-book"></span></a></li>
          <li><a href="/search">搜书<span class="glyphicon glyphicon-search"></span></a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="/config"><span class="glyphicon glyphicon-cog"></span></a></li>
        </ul>
      </div>
    </div>
  </nav>


  <div class="row" id="configtab" style="width: 99%;">
    <div class="col-md-2" id="myScrollspy">
      <!-- Nav tabs -->
      <ul class="nav nav-pills nav-stacked" role="tablist" style="position: fixed; top: 70px; left: 10px; opacity: 1; width: 15%;">
        <li role="presentation" class="active"><a href="#reading" aria-controls="reading" role="tab" data-toggle="tab">阅读设置<i class="glyphicon glyphicon-menu-right pull-right"></i></a></li>
        <li role="presentation"><a href="#search" aria-controls="search" role="tab" data-toggle="tab">搜书设置<i class="glyphicon glyphicon-menu-right pull-right"></i></a></li>
      </ul>
    </div>
    <!-- Tab panes -->
    <div class="tab-content col-md-10 pull-left" style="width:50%">
      <div role="tabpanel" class="tab-pane active" id="reading">

        <form class="form-horizontal">
          <fieldset>
            <legend>阅读设置</legend>

            <div class="form-group">
              <label class="col-lg-2 control-label" for="continuously">连续阅读</label>
              <div class="col-lg-10">
                <input class="form-control" id="continuously" type="checkbox">
              </div>
            </div>

            <div class="form-group">
              <label class="col-lg-2 control-label" for="bold">粗体字</label>
              <div class="col-lg-10">
                <input class="form-control" id="bold" type="checkbox">
              </div>
            </div>

            <div class="form-group">
              <label class="col-lg-2 control-label" for="bkcolor">阅读背景</label>
              <div class="input-group col-lg-10" style="width:150px">
                <span id="bkcolor-display" class="input-group-addon"></span>
                <input class="form-control" id="bkcolor" type="text">
              </div>
              <div class="col-lg-2"></div>
              <span class="help-block col-lg-10">背景颜色支持颜色名称的颜色（比如 red），十六进制值的颜色（比如 #ff0000）， rgb 代码的颜色（比如 rgb(255,0,0)）。</span>
            </div>
            
            <div class="form-group">
              <label class="col-lg-2 control-label" for="fontcolor">字体颜色</label>
              <div class="input-group col-lg-10" style="width:150px">
                <span id="fontcolor-display" class="input-group-addon"></span>
                <input class="form-control" id="fontcolor" type="text">
              </div>
              <div class="col-lg-2"></div>
              <span class="help-block col-lg-10">字体颜色支持颜色名称的颜色（比如 red），十六进制值的颜色（比如 #ff0000）， rgb 代码的颜色（比如 rgb(255,0,0)）。</span>
            </div>

            <div class="form-group">
              <label class="col-lg-2 control-label" for="fontsize">字体大小</label>
              <div class="input-group col-lg-10" style="width:150px">
                <input class="form-control" id="fontsize" type="text">
              </div>
              <div class="col-lg-2"></div>
              <span class="help-block col-lg-10">字体大小支持像素（如 15px）。</span>
            </div>

            <div class="form-group">
              <label class="col-lg-2 control-label" for="fontfamily">字体</label>
              <div class="input-group col-lg-10" style="width:150px">
                <input class="form-control" id="fontfamily" type="text">
              </div>
            </div>

          </fieldset>
        </form>
        <div class="pull-right">
          <button class="btn btn-default btn-lg" type="reset" id="readcancel" onClick="readreset()">重置</button>
          <button class="btn btn-primary btn-lg" type="submit" id="readsubmit" onClick="readsave()">提交</button>
        </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="search">
          <form class="form-horizontal">
          <fieldset>
            <legend>搜索设置</legend>
            <div class="form-group">
              <label class="col-lg-2 control-label" for="searchconfig">搜索背景</label>
              <div class="input-group col-lg-10">
                <textarea class="form-control" id="searchconfig" rows="30"></textarea>
              </div>
              <div class="col-lg-2"></div>
              <span class="help-block col-lg-10">格式为标准config格式，搜索设置使用beautifulsoup4，具体参阅<a href="https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/">相关文档</a></span>
            </div>

          </fieldset>
          </form>
          <div class="pull-right">
            <button class="btn btn-default btn-lg" type="reset" id="searchcancel" onClick="searchreset()">重置</button>
            <button class="btn btn-primary btn-lg" type="submit" id="searchsubmit" onClick="searchsave()">提交</button>
          </div>
        </div>
      </div>

    </div>


    <!-- Placed at the end of the document so the pages load faster -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-switch.min.js"></script>
    <script src="/js/config.js"></script>

    <div id="aldiv" style="position: fixed; bottom: 80px; right: 30px; opacity: 1;"></div>

</body>

</html>